import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Flex } from "antd-mobile";
import s from "./index.scss";
import AxFooter from "components/Footer";
import AxHeader from "components/AxHeader";
// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";

// 引入提示框和标题组件

import "echarts/lib/chart/pie";

import { callApi } from "app/utils";

export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      //flag = 1
      dueProfit: "", //待收收益
      tobecollectedInterest: "", //待收投资利息
      rateCouponProfit: "", //待收加息利息

      //flag = 2
      totalAsset: "", //总资产
      userCash: "", //可用余额
      tobeCollectedPrincipal: "", //代收本金
      frozenBiddingAmount: "", //冻结本金

      //flag = 3
      totalProfit: "", //总收益
      collectedInterest: "", //已获投资利息
      couponProfit: "", //投资赚取
      goldCoinProfit: "", //金币赚取
      dueProfit3: "", //代收收益
      interestAllowance: "", //利息补贴
      otherProfit: "" //其他
    };
  }

  componentDidMount() {
   // console.log(this.props.location.query.flag);
    //颜色列表
    let cList;
    //数据集合
    let datas;
    let that = this;
    let flag = that.props.location.query.flag;
    var myChart = echarts.init(document.getElementById("main"));
    if(localStorage.getItem('userData')!=undefined&&localStorage.getItem('userData')!="undefined"&&localStorage.getItem('userData')!=null){

    let token = JSON.parse(localStorage.getItem("userData")).token;
    callApi("/home/overview", { token: token }, "POST").then(data => {
      if (flag == 1) {
        that.setState({
          dueProfit: data.data["dueProfit"],
          tobecollectedInterest: data.data["tobecollectedInterest"],
          rateCouponProfit: data.data["rateCouponProfit"]
        });
        datas = [
          { value: data.data["tobecollectedInterest"], color: "#FF7272" },
          { value: data.data["rateCouponProfit"], color: "#FFFFBF" }
        ];
        cList = ["#FF7272", "#FFFFBF"];
      } else if (flag == 2) {
        that.setState({
          totalAsset: data.data["totalAsset"],
          userCash:(parseFloat(data.data["cash"]) + parseFloat(data.data["balance"])).toFixed(2),
          tobeCollectedPrincipal: data.data["tobeCollectedPrincipal"],
          frozenBiddingAmount: data.data["frozenBiddingAmount"]
        });
      
        datas = [
          {
            value:parseFloat(data.data["cash"]) + parseFloat(data.data["balance"])
          },
          { value: data.data["tobeCollectedPrincipal"] },
          { value: data.data["frozenBiddingAmount"] }
        ];

        cList = ["#FF7272", "#447CAA", "#18C5A3"];
      } else if (flag == 3) {
        that.setState({
          totalProfit: data.data["totalProfit"],
          collectedInterest: data.data["collectedInterest"],
          couponProfit: data.data["couponProfit"],
          goldCoinProfit: data.data["goldCoinProfit"],
          dueProfit3: data.data["dueProfit"],
          interestAllowance: data.data["interestAllowance"],
          otherProfit: data.data["otherProfit"]
        });
        datas = [
          { value: data.data["collectedInterest"] },
          { value: data.data["couponProfit"] },
          { value: data.data["goldCoinProfit"] },
          { value: data.data["dueProfit"] },
          { value: data.data["interestAllowance"] },
          { value: data.data["otherProfit"] }
        ];

        cList = [
          "#18C5A3",
          "#FF7272",
          "#FFFF00",
          "#FF9326",
          "#CFBFFF",
          "#409FFF"
        ];
      }

      // 绘制图表
      let option = {
        series: [
          {
            type: "pie",
            radius: ["60%", "80%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = cList;
                  return colorList[params.dataIndex];
                }
              }
            },
            data: datas
          }
        ]
      };
      myChart.setOption(option);
    });
  }
  }

  render() {
    let {
      //flag1
      dueProfit,
      tobecollectedInterest,
      rateCouponProfit,
      //flag2
      totalAsset,
      userCash,
      tobeCollectedPrincipal,
      frozenBiddingAmount,
      //flag3
      totalProfit,
      collectedInterest,
      couponProfit,
      goldCoinProfit,
      dueProfit3,
      interestAllowance,
      otherProfit
    } = this.state;

    let flag = this.props.location.query.flag;
    return (
      <div className={`${s.calendarBox}`}>
        <AxHeader />

        {flag == 1 ? (
          <Flex className={`${s.oneBox}`}>
            <span>待收收益</span>{" "}
            <span>
              <span className={`color5`}>{dueProfit}</span>元
            </span>{" "}
          </Flex>
        ) : flag == 2 ? (
          <Flex className={`${s.oneBox}`}>
            <span>总资产</span>{" "}
            <span>
              <span className={`color5`}>{totalAsset}</span>元
            </span>
          </Flex>
        ) : (
          <Flex className={`${s.oneBox}`}>
            <span>总收益</span>{" "}
            <span>
              <span className={`color5`}>{totalProfit}</span>元
            </span>
          </Flex>
        )}

        <div className={`${s.twoBox}`}>
          <Flex className={`${s.two}`} direction="row" justify="center">
            <div id="main" style={{ width: 200, height: 200 }} />
          </Flex>
        </div>
        <div className={`${s.threeBoxPar}`}>
          {flag == 1 ? (
            <Flex className={`${s.threeBox}`}>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se1}`} />待收投资利息
                  </span>
                  <span>{tobecollectedInterest}元</span>
                </div>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se2}`} />待收加息利息{" "}
                  </span>
                  <span>{rateCouponProfit}元</span>
                </div>
              </Flex.Item>
            </Flex>
          ) : flag == 2 ? (
            <Flex className={`${s.threeBox}`}>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se3}`} />可用余额
                  </span>
                  <span> {userCash}元</span>
                </div>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se4}`} />待收本金{" "}
                  </span>
                  <span>{tobeCollectedPrincipal}元</span>
                </div>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se5}`} />冻结本金{" "}
                  </span>
                  <span>{frozenBiddingAmount}元</span>
                </div>
              </Flex.Item>
            </Flex>
          ) : (
            <Flex className={`${s.threeBox}`}>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se6}`} />已获投资利息{" "}
                  </span>
                  <span>{collectedInterest}元</span>
                </div>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se7}`} />优惠券赚取{" "}
                  </span>
                  <span>{couponProfit}元</span>
                </div>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se8}`} />金币赚取{" "}
                  </span>
                  <span>{goldCoinProfit}元</span>
                </div>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se9}`} />待收收益{" "}
                  </span>
                  <span>{dueProfit3}元</span>
                </div>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se10}`} />利息补贴{" "}
                  </span>
                  <span>{interestAllowance}元</span>
                </div>
              </Flex.Item>
              <Flex.Item className={`${s.item}`}>
                <div className={`${s.top}`}>
                  <span>
                    <span className={`${s.seBox} ${s.se11}`} />其它{" "}
                  </span>
                  <span>{otherProfit}元</span>
                </div>
              </Flex.Item>
            </Flex>
          )}
        </div>
        <AxFooter base={true} />
      </div>
    );
  }
}
